<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--    <script src="../../../static/self-js/DrawingManager.js"></script>-->
</head>

<body>
<script th:src="@{/js/DrawingManager.js}"></script>
<div id="myopcanvas">
<canvas id="myCanvas" style="border:1px solid;" width="1024px" height="800px"></canvas>
</div>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script type="text/javascript">
    //判断是否支持
    var cvs = document.getElementById("myCanvas");
    if (!cvs.getContext){
        alert("您的浏览器不支持电子围栏绘图!");
    }
    var cxt=cvs.getContext("2d");
    DrawingManager.setCanvas("myCanvas");
    //事件
    var mousemanager = document.getElementById("myCanvas");
    mousemanager.addEventListener("mousedown",mousedownhandler);
    mousemanager.addEventListener("mouseup",mouseuphandler);
    mousemanager.addEventListener("dblclick",mousedbhandler);
    DrawingManager.shapetype = 2;//绘制多边形
    function mousedownhandler(e){
    //    DrawingManager.drawFirstRectPoint(e.clientX,e.clientY);
        switch(DrawingManager.shapetype){
            case 1:
                DrawingManager.drawFirstRectPoint(e.clientX,e.clientY);
                break;
            case 2:
                DrawingManager.drawTempshape(2,e.clientX,e.clientY);
                break;
            case 3:
                break;
        }
    }
    function mouseuphandler(e){
        DrawingManager.drawLastRectPoint(e.clientX,e.clientY);
    }
    function mousedbhandler(e){//双击事件
        DrawingManager.drawPolygondone();
    }
</script>
</body>
</html>